<!--
** 右侧表单
**
 -->
<template>
  <div>
    <template v-if="isNoMoreArray.includes(node.nodeType)">
      <!-- 自动节点15 -->
      <BasicAttributes v-model:node="node"></BasicAttributes>
    </template>
    <template v-else>
      <div class="ef-node-form">
        <a-tabs v-model:activeKey="NodeActiveKey">
          <a-tab-pane key="12" tab="基础属性">
            <BasicAttributes :flowData="flowData" v-model:node="node"></BasicAttributes>
          </a-tab-pane>
          <a-tab-pane key="22" tab="更多属性">
            <MoreNodeForm v-model:node="node"></MoreNodeForm>
          </a-tab-pane>
        </a-tabs>
      </div>
    </template>
  </div>
</template>

<script setup>
import { defineComponent, ref, defineEmits, defineProps, onMounted, watch } from "vue";
import { cloneDeep } from "lodash";
import BasicAttributes from "@/components/flowDesign/flowCommon/compoents/BasicAttributes.vue";
import MoreNodeForm from "@/components/flowDesign/flowCommon/compoents/MoreNodeForm.vue";
import { dataB } from "@/components/flowDesign/dicts/data_B.js";
import { nodeTypeNames } from "@/components/flowDesign/dicts/show.js";

const NodeActiveKey = ref("12");
const emit = defineEmits(["setLineLabel", "repaintEverything", "updataFlowData"]);
const isNoMoreArray = ref([nodeTypeNames.autoNode, nodeTypeNames.pifNode, nodeTypeNames.ifNode, nodeTypeNames.subprocessNode]);
const props = defineProps({
  _nodeId: {
    type: String,
    default: '1'
  },
  flowData: {
    type: Object
  }
});
// // node 或 line
const type = ref("node");
const line = ref({});
const flowData = ref({}); //流程图数据
const node = ref({}); //选中节点数据
const _nodeId = ref(""); //选中节点Id
/**
 * 表单修改，这里可以根据传入的ID进行业务信息获取
 * @param data
 * @param id
 */
const threeData = { columnName: "全选", visibleValue: false, editValue: false };
const nodeInit = () => {
  type.value = "node";
  flowData.value = props.flowData;
  flowData.value.nodeList.filter((item) => {
    if (item.nodeKey === _nodeId.value) {
      // node.value = cloneDeep(item);
      node.value = item;
      // console.log("nodeFormTabs.vue页面中的node:", node.value);
      if (!node.value.config.form) return;
      node.value.config.form.column.forEach((item) => {
        if (item.viewType) {
          var strArr = item.viewType.split(",");
          for (let i = 0; i < strArr.length; i++) {
            switch (strArr[i]) {
              case "001":
                item.visibleValue = false;
                break;
              case "110":
                item.visibleValue = true;
                break;
              case "011":
                item.editValue = false;
                break;
              case "100":
                item.editValue = true;
                break;
              case "111":
                item.bulletinValue = false;
                break;
              case "000":
                item.bulletinValue = true;
                break;
              default:
                break;
            }
          }
        }
      });
    }
  });
};
const lineInit = (line) => {
  type.value = "line";
  line.value = line;
};
// 修改连线
const saveLine = () => {
  emit("setLineLabel", line.value.from, line.value.to, line.value.label);
};
const save = () => {
  // data.value.nodeList.filter((node) => {
  //   if (node.id === node.value.id) {
  //     node.name = node.value.name;
  //     node.left = node.value.left;
  //     node.top = node.value.top;
  //     node.ico = node.value.ico;
  //     node.state = node.value.state;
  //     emit("repaintEverything");
  //   }
  // });
};
/**
 * */
watch(
  () => props._nodeId,
  (newValue) => {
    console.log("触发nodeId改变,nodeTabs页面中的id=", newValue);
    _nodeId.value = newValue;
    nodeInit();
  },
  {
    deep: true,
    immediate: true
  }
);
onMounted(() => {
  _nodeId.value = props._nodeId;
  nodeInit();
});
</script>

<style scoped lang="less">
.ef-node-form {
  margin-left: 15px;
}
</style>
